package com.example.composestudy.ui.discovery

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composestudy.ui.theme.ColorCyan
import com.example.composestudy.ui.theme.ColorRed
import com.example.composestudy.ui.theme.ColorYellow
import com.example.composestudy.ui.widget.MyTopAppBar

/**
 * https://mp.weixin.qq.com/s/uEarCe-Q3p2gDADB23mUaw
 */

@Composable
fun CanvasPage(
    onBack: () -> Unit,
) {
    Scaffold(topBar = {
        MyTopAppBar(title = "Canvas") {
            onBack.invoke()
        }
    }) { innerPadding ->
        LazyColumn(modifier = Modifier
            .padding(top = innerPadding.calculateTopPadding())
            .padding(horizontal = 20.dp)) {
            item {
                Canvas(modifier = Modifier.size(100.dp)) {
                    drawRect(color = ColorRed)
                }
                Spacer(modifier = Modifier.height(20.dp))
            }

            item {
                Canvas(modifier = Modifier.size(100.dp)) {
                    drawCircle(color = ColorRed)
                }
                Spacer(modifier = Modifier.height(20.dp))
            }

            item {
                Canvas(modifier = Modifier.size(100.dp)) {
                    drawLine(color = ColorRed, start = Offset(x = 0f, y = 0f), end = Offset(x = 200f, y = 200f), strokeWidth = 5f)
                }
                Spacer(modifier = Modifier.height(20.dp))
            }

            item {
                Canvas(modifier = Modifier.size(100.dp)) {
                    drawRect(color = ColorRed, style = Stroke(width = 5f, cap = StrokeCap.Round))
                }
                Spacer(modifier = Modifier.height(20.dp))
            }


            item {
                Canvas(modifier = Modifier.size(200.dp)) {
                    val gradient = Brush.linearGradient(
                        colors = listOf(ColorRed, ColorYellow),
                        start = Offset(x = 0f, y = 0f),
                        end = Offset(x = 200f, y = 0f)
                    )
                    drawRect(brush = gradient, size = Size(200f, 200f))
                }
                Spacer(modifier = Modifier.height(20.dp))
            }

            item {
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(ColorCyan)) {
                    Canvas(modifier = Modifier.fillMaxSize()) {
                        val gradient = Brush.linearGradient(
                            colors = listOf(ColorRed, ColorYellow),
                            start = Offset(x = 0f, y = 0f),
                            end = Offset(x = size.width, y = 0f)
                        )
                        drawRect(brush = gradient, size = Size(size.width, size.height))
                    }
                }
                Spacer(modifier = Modifier.height(20.dp))
            }

            item {
                val textMeasurer = rememberTextMeasurer()
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(ColorCyan)) {
                    Canvas(modifier = Modifier.fillMaxSize()) {
                        drawText(
                            textMeasurer = textMeasurer,
                            text = "Hello, World!",
                            style =
                                TextStyle(
                                    fontSize = 24.sp,
                                    fontWeight = FontWeight.Bold,
                                    textDecoration = TextDecoration.Underline
                                )
                        )
                    }
                }
            }
        }
    }
}